<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Pie 2D: Smart Label</title>
        <style type="text/css">
        	@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/tests/css/dijitTests.css";
			@import "../../../dijit/themes/claro/claro.css";
			@import "../resources/Legend.css";
        </style>
        <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true">
        </script>
        <script type="text/javascript">
            dojo.require("dojox.charting.Chart");
            dojo.require("dojox.charting.plot2d.Pie");
            dojo.require("dojox.charting.action2d.Highlight");
            dojo.require("dojox.charting.action2d.MoveSlice");
            dojo.require("dojox.charting.action2d.Tooltip");
			dojo.require("dojox.charting.themes.Tom");
            dojo.require("dojox.charting.widget.Legend");
			
            var pieChart = null;
			var legend = null;
            dojo.addOnLoad(function(){
                var dc = dojox.charting;
                pieChart = new dc.Chart("pieChart");
                pieChart.setTheme(dc.themes.Tom).addPlot("default", {
                    type: "Pie",
                    font: "normal normal 10pt Tahoma",
					fontColor: "#ccc",
					labelWiring: "#ccc",
                    radius: 100,
					labelStyle: "columns",
					htmlLabels: true,
					startAngle: -10
                }).addSeries("Series A", [{
                    y: 12.1,
                    text: "China",
                    tooltip: "1,210 million"
                },{
                    y: 9.52,
                    text: "India",
                    tooltip: "952 million"
                }, {
                    y: 2.66,
                    text: "USA",
                    tooltip: "266 million"
                }, {
                    y: 2.06,
                    text: "Indonisia",
                    tooltip: "206 million"
                }, {
                    y: 1.63,
                    text: "Brazil",
                    tooltip: "163 million"
                },{
                    y: 1.48,
                    text: "Russian",
                    tooltip: "148 million"
                },{
                    y: 1.29,
                    text: "Pakistan",
                    tooltip: "129 million"
                },{
                    y: 1.25,
                    text: "Japan",
                    tooltip: "125 million"
                },{
                    y: 1.23,
                    text: "Bangladesh",
                    tooltip: "123 million"
                },{
                    y: 1.04,
                    text: "Nigeria",
                    tooltip: "104 million"
                },{
                    y: 0.96,
                    text: "Mexico",
                    tooltip: "96 million"
                },{
                    y: 0.84,
                    text: "Germany",
                    tooltip: "84 million"
                },{
                    y: 0.74,
                    text: "Phillippines",
                    tooltip: "74 million"
                },{
                    y: 0.74,
                    text: "Viet Nam",
                    tooltip: "74 million"
                },{
                    y: 0.66,
                    text: "Iran",
                    tooltip: "66 million"
                },{
                    y: 0.64,
                    text: "Egypt",
                    tooltip: "64 million"
                }]);
                var anim_b = new dc.action2d.Highlight(pieChart, "default");
                var anim_c = new dc.action2d.Tooltip(pieChart, "default");
                pieChart.render();
                legend = new dojox.charting.widget.Legend({
                    chart: pieChart,
					horizontal:false
                }, "legend");
            });
			function refreshChart(){
				var newData = [];
				for(var i = 0; i < 16; i++){
					newData.push(Math.random()*10);
				}
				newData.sort(function(v1,v2){return v2 - v1});
				pieChart.updateSeries("Series A", newData);
				pieChart.render();
				legend.refresh();
			}
        </script>
    </head>
    <body class="claro">
    	<h1>Pie 2D: Smart Label</h1>
		<p>Example of Pie chart using smart label:</p>
        <div style="margin:20px">
            <div id="pieChart" style="width: 470px; height: 350px; float:left;">
            </div>
            <div id="legend">
            </div>
        </div>
		<button onclick="refreshChart()">Random Data Test</button>
    </body>
</html>
